/* 标签选择器 选中所有div并控制其样式 */
div {
    /* 宽度默认占满全屏 */

    /* 定义高度 197像素pixel px */
    /* height: 196px; */

    /* 文本水平居中 */
    /* text-align: center; */
}

/* .xxx = 类选择器 = 选中所有类名包含xxx的元素 + 定义样式 */
.zhai {
    /* 宽度为1190px */
    width: 1190px;

    /* 水平居中 = 左右间距相等 */
    /* margin-left: 100px;
        margin-right: 100px;
        margin-top: 50px;
        margin-bottom: 50px; */

    /* 上下间距50 左右间距100 */
    /* margin: 50px 100px; */

    /* 上下间距50 左右间距自动 */
    margin: 38px auto;

    /* 当前盒子的背景色 */
    /* background-color: green; */
}









/* ========== 页头部分 ========== */

/* 选中id为header-box的那个元素 定义其样式 */
#header-box {
    background-color: cyan;

    /* 行高与盒子高度一致时 单行文字垂直居中 */
    height: 196px;
    line-height: 196px;
}

/* 子代选择器 */
#header-box>.top-bar {
    height: 42px;
    background-color: #f8f8f8;
}

#header-box>.top-bar>.middle-box {
    line-height: 42px;
}

/* 一堆元素:筛选条件 = 伪类选择器 */
/* 顶栏下的所有span 被鼠标覆盖时 */
/* #header-box>.top-bar span:hover {
        color: #fe8c00;
        cursor: pointer;
    } */

/* 右侧盒子内的span左右内边距都是14 */
#header-box>.top-bar>.middle-box>.left-box>span {
    margin: 0 4px;
}

/* 选中一堆元素的选择器:进一步的筛选条件  =  伪类选择器 */
/* 前面的选择器选中了一大堆元素:nth-child(6) 一大堆元素中的第8个元素 */
#header-box>.top-bar>.middle-box>.left-box>span:nth-child(9) {
    margin-left: 28px;

    /* 文本颜色 */
    color: #fe8c00;
}

/* 切换城市 */
#qiehuan {
    border: 1px solid #e5e5e5;
    padding: 0 2px;

    /* 边框有圆角 */
    border-radius: 2px;
}


/* 右侧盒子内的span左右内边距都是14 */
#header-box>.top-bar>.middle-box>.right-box>span {
    padding: 0 14px;
}


#header-box>.search-box {
    height: 106px;
    background-color: white;
}

#header-box>.search-box>.middle-box {
    /* 配合子盒子的绝对定位 */
    position: relative;
}

#header-box>.search-box>.middle-box>.img-box {
    width: 125px;
    height: 45px;
    /* background-color: #ff0000; */

    /* 相对于父盒子做绝对定位 */
    position: absolute;

    /* 左0 */
    left: 0;

    /* top 50% */
    top: 50%;

    /* 向上位移自身高度的50% */
    transform: translateY(-50%);
}

#header-box>.search-box>.middle-box>.input-box {
    width: 552px;
    height: 40px;
    /* background-color: #00ff00; */

    /*  */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#header-box>.search-box>.middle-box>.input-box>input {
    /* 相对于父元素做绝对定位 正常情况下父元素应该position:relative 但如果父元素本身也是absolute定位 就不用改了 */
    position: absolute;

    /* 对齐父元素左上角 */
    left: 0;
    top: 0;

    /* 边框 */
    border: 1px solid #e5e5e5;

    /* 边框圆角 左上 右上 右下 左下（顺时针） */
    border-radius: 4px 0 0 4px;

    /* 不要padding */
    padding: 0;

    /* 聚焦时没有边框 */
    outline: none;

    width: 471px;
    height: 38px;

    /* 文字大小 */
    font-size: 14px;

    /* 文字缩进 */
    text-indent: 15px;
}

#header-box>.search-box>.middle-box>.input-box>button {
    position: absolute;

    /* 对齐父元素右上角 */
    right: 0;
    top: 0;

    /* 宽高 */
    height: 100%;
    width: 82px;
    background-color: #ffc300;

    border: none;

    /* 边框圆角 左上 右上 右下 左下（顺时针） */
    border-radius: 0 4px 4px 0;
}

#header-box>.search-box>.middle-box>.input-box>button>.iconfont {
    font-size: 20px;

    /* 文字粗细 100~900 bold/bolder  */
    font-weight: 700;
}


/* 后代选择器  */
#header-box .menu-box {
    height: 48px;
    background-color: red;
}

/* ========== EOF页头部分 ========== */





/* 组合选择器（标签.类名） 选中类名为zhai的所有div */
/* div.zhai {
        border: 1px solid black;
    } */

/* 类名选择器 类名包含banner的所有元素 */
.banner {
    /* 设置高度 */
    /* 行高与盒子高度一致时 单行文字垂直居中 */
    height: 426px;

    /* 背景色 */
    /* background-color: orange; */

    margin-top: 0;
}

.maoyan {
    /* height: 341px; */
    /* line-height: 341px; */
    background-color: blueviolet;
}

.xihuan {
    /* height: 804px; */
    /* line-height: 804px; */
    background-color: beige;
}

.daohang {
    /* height: 272px; */
    /* line-height: 272px; */
    background-color: skyblue;
}

.lianjie {
    height: 608px;
    /* line-height: 608px; */
    /* background-color: bisque; */

    /* 覆盖之前的下间距50为100px */
    /* margin-bottom: 100px; */
    margin-bottom: 0;
}

.yejiao {
    height: 144px;
    box-sizing: border-box;

    /* line-height: 144px; */
    /* background-color: cadetblue; */
    
    margin-top: 0;
    margin-bottom: 0;
}